<template>
  <view class="universal-detail">
    <view class="universal-detail-top">
      <view class="universal-detail-top-time"><text class="universal-detail-top-title">处理</text></view>
    </view>
    <view class="universal-detail-cont">
      <van-form class="universal-detail-form initForm" @submit="onSubmit" :readonly="loading" label-width="130px" colon>
        <van-cell-group inset>
          <van-field
            v-model="form.repairResult"
            rows="4" autosize type="textarea"
            label="处理方式及结果"
            placeholder=""
          />
          <van-field
            name="uploader" required label="处理照片"
            :rules="[{ required: true, message: '请上传处理照片' }]"
          >
            <template #input>
              <upload-file accept="image/*" v-model="form.finishPic" ></upload-file>
            </template>
          </van-field>
          <van-field
            name="uploader" label="处理视频"
          >
            <template #input>
              <upload-file accept="video/*" v-model="form.finishVideo"></upload-file>
            </template>
          </van-field>
          <van-field
            v-model="form.auditerName"
            is-link readonly required
            name="picker"
            label="审核人"
            placeholder="请选择审核人"
            @click="selectShow.user = true"
            :rules="[{ required: true, message: '请选择审核人' }]"
          />
        </van-cell-group>
        <view class="universal-detail-bottom">
          <van-button @click="$emit('cancel')" class="universal-detail-bottom-button universal-detail-bottom-button-cancel" type="default">取消</van-button>
          <van-button 
            class="universal-detail-bottom-button universal-detail-bottom-button-sumbit" type="primary" native-type="submit"
            :loading="loading" loading-text="提交中..."
          >提交</van-button>
        </view>
      </van-form>
    </view>

    <!-- 选择器 审核人 -->
    <picker-search
      v-model:show="selectShow.user"
      :columns="usersList"
      @confirm="onUserConfirm"
      @cancel="selectShow.user = false"
    ></picker-search>
  </view>
</template>

<script setup>
import dayjs from 'dayjs'
import { ref } from 'vue';
import { apiHiddenTrobleSubmit } from '@/api/hiddenTroble';
import { apiUsersList } from '@/api/common';

const model = defineModel();
const emit = defineEmits(['confirm']);
const loading = ref(false);

const form = ref({
  repairResult: '',
  finishPic: [],
  finishVideo: [],
});
const selectShow = ref({
  user: false,
});
let usersList = ref([]);

const onSubmit = () => {
  loading.value = true;
  const params = {
    ...form.value,
    troubleId: model.value.troubleId,
    repairTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
    finishTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
  }
  apiHiddenTrobleSubmit(params).then(res => {
    loading.value = false;
    emit('confirm');
  })
}

// 选择器 审核人
const onUserConfirm = ({selectedValues, selectedOptions}) => {
  form.value.auditer = selectedOptions[0].value;
  form.value.auditerName = selectedOptions[0].text;
  selectShow.value.user = false;
}

// 获取数据 人员
const getUsersList = () => {
  apiUsersList({
    pageNumber: 1,
    pageSize: 10000,
  }).then(res => {
    usersList.value = res.records.map(n => ({
      text: n.name,
      value: n.userId
    }));
  })
}
getUsersList();
</script>

<style lang="scss" scoped>
@import '@/assets/universal-detail.scss';
</style>